<template>
  <el-card class="box-card">
    <breadcrumb :naviItems.sync="naviItems"></breadcrumb>
    <div v-if="!showDetail">
      <div class="table">
        <div class="container">
          <el-table v-loading="JjUnitListLoading" :data="JjUnitListTableData" max-height="800" style="width: 100%">
            <el-table-column fixed prop="Id" label="序号" width="100"> </el-table-column>
            <el-table-column prop="JjUnit" label="监管部门" width="350">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  style="text-decoration: underline; color: #606266"
                  @click="gotoDetail(scope.row.Area, scope.row.JjUnit)"
                  >{{ scope.row.JjUnit }}</el-button
                >
              </template>
            </el-table-column>
            <el-table-column prop="Level" label="级别" width="150"> </el-table-column>
            <el-table-column prop="Address" label="地址" width="350"> </el-table-column>
            <el-table-column prop="Manager" label="邮编" width="150"> </el-table-column>
            <el-table-column prop="Telphone" label="电话" width="150"> </el-table-column>
            <el-table-column prop="Email" label="邮箱" width="200"> </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="page">
        <div class="container">
          <el-pagination
            background
            @size-change="JjUnitListTablePageSizeChange"
            @current-change="JjUnitListTablePageChange"
            :current-page="JjUnitListCurrentPage"
            :page-sizes="[10, 15, 20, 40]"
            :page-size="JjUnitListArgs.num"
            layout="total, sizes, prev, pager, next, jumper"
            :total="JjUnitListTotal"
          >
          </el-pagination>
        </div>
      </div>
    </div>

    <div v-if="showDetail">
      <div class="detail-container">
        <!-- tabs -->
        <div class="text-cards">
          <div class="text-card" :class="tabsClass.sydw" @click="tabsChange('sydw')">
            <span class="grey">辖内使用单位</span>
            <span class="grey">{{ JjUnitDetailData.SydwCount + '家' }}</span>
          </div>
          <div class="text-card" :class="tabsClass.gas" @click="tabsChange('gas')">
            <span class="grey">辖内气瓶总量</span>
            <span class="grey">{{ JjUnitDetailData.GasCount + '只' }}</span>
          </div>
          <div class="text-card" :class="tabsClass.check" @click="tabsChange('check')">
            <span class="grey">辖内检验单位</span>
            <span class="grey">{{ JjUnitDetailData.CheckUnitCount + '家' }}</span>
          </div>
        </div>
        <!-- 根据tabs切换的内容 -->

        <!-- 使用单位相关 -->
        <div class="sydw" v-if="tabsClass.sydw == 'active'">
          <div class="table">
            <div class="container">
              <el-table v-loading="JjUnitSydwListLoading" :data="JjUnitSydwListTableData" height="600" border:false>
                <el-table-column fixed prop="ItemId" label="序号" width="110"> </el-table-column>
                <el-table-column prop="SydwName" label="使用单位" width="350"> </el-table-column>
                <el-table-column prop="GasCount" label="设备总量" width="150"> </el-table-column>
                <el-table-column label="高风险设备量">
                  <el-table-column prop="UseGT12Years" label="使用时间≥12年" width="150"> </el-table-column>
                  <el-table-column prop="RecordGT300" label="充装次数≥300次" width="150"> </el-table-column>
                  <el-table-column prop="OverdueUncheckCount" label="超期未检" width="150"> </el-table-column>
                </el-table-column>
                <el-table-column prop="RiskLevel" label="单位风险等级" width="150"> </el-table-column>
                <el-table-column prop="Manager" label="联系人" width="100"> </el-table-column>
                <el-table-column prop="Telphone" label="联系电话" width="240"> </el-table-column>
              </el-table>
            </div>
          </div>
          <div class="page">
            <div class="container">
              <el-pagination
                background
                @size-change="JjUnitSydwListTablePageSizeChange"
                @current-change="JjUnitSydwListTablePageChange"
                :current-page="JjUnitSydwListCurrentPage"
                :page-sizes="[10, 15, 20, 40]"
                :page-size="JjUnitSydwListArgs.num"
                layout="total, sizes, prev, pager, next, jumper"
                :total="JjUnitSydwListTotal"
              >
              </el-pagination>
            </div>
          </div>
        </div>

        <!-- 气瓶相关 -->
        <div class="gas" v-if="tabsClass.gas == 'active'">
          <div class="charts">
            <!-- 制造时间图表 -->
            <div class="chart">
              <div id="gas-make" style="min-width: 400px; height: 400px"></div>
            </div>
            <!-- 充装次数图表 -->
            <div class="chart">
              <div id="gas-record" style="min-width: 800px; height: 400px"></div>
            </div>
          </div>
          <div class="table">
            <div class="container">
              <el-table v-loading="JjUnitGasListLoading" :data="JjUnitGasListTableData" height="400">
                <el-table-column fixed prop="Id" label="序号" width="110"> </el-table-column>
                <el-table-column prop="GasId" label="设备代码" width="150"> </el-table-column>
                <el-table-column prop="GasType" label="气瓶品种" width="150"> </el-table-column>
                <el-table-column prop="Media" label="充装介质" width="150"> </el-table-column>
                <el-table-column prop="MakeDate" label="制造年月" width="150"> </el-table-column>
                <el-table-column prop="CheckDate" label="检验日期" width="150"> </el-table-column>
                <el-table-column prop="CheckCircle" label="检验周期" width="120"> </el-table-column>
                <el-table-column prop="RecordCount" label="充装次数" width="120"> </el-table-column>
                <el-table-column prop="RiskLevel" label="风险等级" width="120"> </el-table-column>
                <el-table-column prop="CheckUnit" label="检验单位" width="150"> </el-table-column>
                <el-table-column prop="SydwName" label="使用单位" width="150"> </el-table-column>
                <el-table-column prop="RecordUnit" label="充装单位" width="150"> </el-table-column>
              </el-table>
            </div>
          </div>
          <div class="page">
            <div class="container">
              <el-pagination
                background
                @size-change="JjUnitGasListTablePageSizeChange"
                @current-change="JjUnitGasListTablePageChange"
                :current-page="JjUnitGasListCurrentPage"
                :page-sizes="[10, 15, 20, 40]"
                :page-size="JjUnitGasListArgs.num"
                layout="total, sizes, prev, pager, next, jumper"
                :total="JjUnitGasListTotal"
              >
              </el-pagination>
            </div>
          </div>
        </div>

        <!-- 定检单位相关 -->
        <div class="check" v-if="tabsClass.check == 'active'">
          <div class="table">
            <div class="container">
              <el-table v-loading="JjUnitCheckUnitListLoading" :data="JjUnitCheckUnitListTableData" height="600">
                <el-table-column fixed prop="Id" label="序号" width="110"> </el-table-column>
                <el-table-column fixed prop="CheckUnit" label="检验单位" width="400"> </el-table-column>
                <el-table-column fixed label="核准证编号" width="150"> </el-table-column>
                <el-table-column fixed label="检验范围" width="200"> </el-table-column>
                <el-table-column fixed label="有效期" width="110"> </el-table-column>
                <el-table-column fixed label="检验总量" width="150"> </el-table-column>
                <el-table-column fixed label="联系人" width="110"> </el-table-column>
                <el-table-column fixed label="联系电话" width="300"> </el-table-column>
              </el-table>
            </div>
          </div>
          <div class="page">
            <div class="container">
              <el-pagination
                background
                @size-change="JjUnitCheckUnitListTablePageSizeChange"
                @current-change="JjUnitCheckUnitListTablePageChange"
                :current-page="JjUnitCheckUnitListCurrentPage"
                :page-sizes="[10, 15, 20, 40]"
                :page-size="JjUnitCheckUnitListArgs.num"
                layout="total, sizes, prev, pager, next, jumper"
                :total="JjUnitCheckUnitListTotal"
              >
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script>
import Breadcrumb from "../../../../components/QipingBreadCrumb/BreadCrumb.vue";
import {
  JjUnitListSearchArgs,
  JjUnitDetailSearchArgs,
  JjUnitSydwListSearchArgs,
  JjUnitGasDetailSearchArgs,
  JjUnitGasListSearchArgs,
  JjUnitCheckUnitListSearchArgs,
  searchJjUnitList,
  searchJjUnitDetail,
  searchJjUnitSydwList,
  searchJjUnitGasDetail,
  searchJjUnitGasList,
  searchJjUnitCheckUnitList,
} from '../../../../api/qiping/data-service'
import Highcharts from 'highcharts/highstock'
export default {
  data() {
    return {
      // 监督检验单位管辖区域（例如，国家或山东省或日照市，根据不同的Area，可以对应相关的监督检验单位）
      Area: '',
      JjUnit: '',

      // 显示模式
      showDetail: false, // 默认显示监督检验单位列表表格

      // 详情模式下的tab样式,选中时为active,显示为红色，未选中时为空字符串，显示为灰色，
      tabsClass: {
        sydw: 'active', // 使用单位tab
        gas: '', // 气瓶tab
        check: '', // 检验单位tab
      },

      // 导航树相关数据
      naviBasicItems: [{ text: '气瓶' }, { text: '云服监管', to: '/qiping/dataservice/regulator' }],
      naviItems: [],

      // 图表相关数据
      gasMakeInfoChart: null,
      gasRecordInfoChart: null,

      // 监督检验单位列表表格相关数据
      JjUnitListLoading: true,
      JjUnitListTableData: [],
      JjUnitListTotal: 0,
      JjUnitListCurrentPage: 1,
      JjUnitListArgs: new JjUnitListSearchArgs(),

      // 某个监管单位的详情统计数据
      JjUnitDetailData: {
        SydwCount: 0, // 辖内气瓶使用单位数量
        GasCount: 0, // 辖内气瓶总量
        CheckUnitCount: 0, // 辖内检验单位总量
      },
      JjUnitDetailArgs: new JjUnitDetailSearchArgs(),

      // 监管单位的使用单位列表表格相关数据
      JjUnitSydwListLoading: true,
      JjUnitSydwListTableData: [],
      JjUnitSydwListTotal: 0,
      JjUnitSydwListCurrentPage: 1,
      JjUnitSydwListArgs: new JjUnitSydwListSearchArgs(),

      // 监管单位的辖内气瓶列表表格相关数据
      JjUnitGasListLoading: true,
      JjUnitGasListTableData: [],
      JjUnitGasListTotal: 0,
      JjUnitGasListCurrentPage: 1,
      JjUnitGasListArgs: new JjUnitGasListSearchArgs(),
      // 监管单位的辖内气瓶详情统计数据
      JjUnitGasDetailData: {
        MakeYearsInfo: [],
        GasRecordInfo: [],
      },
      JjUnitGasDetailArgs: new JjUnitGasDetailSearchArgs(),

      // 监管单位辖内检验单位列表表格相关数据
      JjUnitCheckUnitListLoading: true,
      JjUnitCheckUnitListTableData: [],
      JjUnitCheckUnitListTotal: 0,
      JjUnitCheckUnitListCurrentPage: 1,
      JjUnitCheckUnitListArgs: new JjUnitCheckUnitListSearchArgs(),
    }
  },
  async created() {
    if (!this.$route.params.Area) {
      // url不带Area,进入监督检验单位列表表格界面
      // 表格界面的一些参数的初始化
      this.naviItems = [...this.naviBasicItems]
      this.showDetail = false
      // 获取监督检验单位列表数据
      await this.searchJjUnitList()
    } else {
      // url带Area，进入Area对应的详情界面
      // 详情界面的一些参数的初始化
        // 集成到当前项目后由于vue-admin-template的一些特性，一级菜单重定向时不能识别路由参数，故在此重新重定向一次
      if (this.$route.params.Area == ":Area") {
        this.$router.replace({
          name: "qiping-dataService-regulator",
        });
      }
      this.Area = this.$route.params.Area
      this.JjUnit = this.$route.params.JjUnit
      this.naviItems = [
        ...this.naviBasicItems,
        {
          text: this.JjUnit,
          to: '/qiping/dataservice/regulator' + '/' + this.$route.params.Area + '/' + this.$route.params.JjUnit,
          color: 'red',
        },
      ]
      this.showDetail = true
      // 获取监管部门相关统计数据
      await this.searchJjUnitDetailData()
      // 默认显示使用单位tab下的数据，所以搜索使用单位相关数据
      await this.searchJjUnitSydwList()
    }
  },
  components: {
    Breadcrumb,
  },
  methods: {
    // 获取监督检验单位列表数据
    async searchJjUnitList() {
      this.JjUnitListLoading = true
      const res = await searchJjUnitList(this.JjUnitListArgs)
      this.JjUnitListLoading = false
      const { list, total } = res.data
      this.JjUnitListTableData = list
      this.JjUnitListTotal = +total
    },
    // 监督检验单位列表表格页面大小改变
    async JjUnitListTablePageSizeChange(pageSize) {
      this.JjUnitListArgs.num = pageSize
      this.JjUnitListArgs.offset = -4
      await this.searchJjUnitList()
    },
    // 监督检验单位列表表格页码改变
    async JjUnitListTablePageChange(page) {
      this.JjUnitListArgs.offset = (page - 1) * this.JjUnitListArgs.num - 4
      this.JjUnitListCurrentPage = page
      await this.searchJjUnitList()
    },
    // 跳转到某个监督检验单位的详情页面
    gotoDetail(Area, JjUnit) {
      this.$router.replace({
        name: 'reload',
        params: {
          to: '/qiping/dataservice/regulator/' + Area + '/' + JjUnit,
        },
      })
    },

    // 切换tabs
    async tabsChange(tab) {
      console.log('点击切换tab')
      switch (tab) {
        case 'sydw':
          this.tabsClass = {
            sydw: 'active',
            gas: '',
            check: '',
          }
          await this.searchJjUnitSydwList()
          break
        case 'gas':
          this.tabsClass = {
            sydw: '',
            gas: 'active',
            check: '',
          }
          await this.searchJjUnitGasDetailData()
          await this.searchJjUnitGasList()
          break
        case 'check':
          this.tabsClass = {
            sydw: '',
            gas: '',
            check: 'active',
          }
          await this.searchJjUnitCheckUnitList()
          break
        default:
          break
      }
    },

    // 获取某个监管部门的详细数据
    async searchJjUnitDetailData() {
      this.JjUnitDetailArgs.Area = this.Area
      const res = await searchJjUnitDetail(this.JjUnitDetailArgs)
      this.JjUnitDetailData = res.data
    },

    // 获取某个监管部门的使用单位列表数据
    async searchJjUnitSydwList() {
      // this.JjUnitSydwListLoading = false;
      // return;
      this.JjUnitSydwListLoading = true
      this.JjUnitSydwListArgs.Area = this.Area
      const res = await searchJjUnitSydwList(this.JjUnitSydwListArgs)
      const { list, total } = res.data
      this.JjUnitSydwListTableData = list
      this.JjUnitSydwListTotal = +total
      this.JjUnitSydwListLoading = false
    },
    // 监管部门的使用单位列表表格页面大小改变
    async JjUnitSydwListTablePageSizeChange(pageSize) {
      this.JjUnitSydwListArgs.num = pageSize
      this.JjUnitSydwListArgs.offset = 0
      await this.searchJjUnitSydwList()
    },
    // 监管部门的使用单位列表表格页码改变
    async JjUnitSydwListTablePageChange(page) {
      this.JjUnitSydwListArgs.offset = (page - 1) * this.JjUnitSydwListArgs.num
      this.JjUnitSydwListCurrentPage = page
      await this.searchJjUnitSydwList()
    },
    // 获取某个监管部门的气瓶统计数据
    async searchJjUnitGasDetailData() {
      this.JjUnitGasDetailArgs.Area = this.Area
      const res = await searchJjUnitGasDetail(this.JjUnitGasDetailArgs)
      this.JjUnitGasDetailData = res.data
      // 获得数据绘制相关图表
      await this.setMakeYearsChart(this.JjUnitGasDetailData.MakeYearsInfo)
      await this.setRecordChart(this.JjUnitGasDetailData.GasRecordInfo)
    },
    // 获取某个监管部门的气瓶列表
    async searchJjUnitGasList() {
      this.JjUnitGasListLoading = true
      this.JjUnitGasListArgs.Area = this.Area
      const res = await searchJjUnitGasList(this.JjUnitGasListArgs)
      const { list, total } = res.data
      for (const item of list) {
        item.CheckCircle =
          Math.round((new Date(item.NextCheckDate) - new Date(item.CheckDate)) / (1000 * 3600 * 24 * 365)) + '年'
      }
      this.JjUnitGasListTableData = list
      this.JjUnitGasListTotal = +total
      this.JjUnitGasListLoading = false
    },
    // 监管部门的气瓶列表表格页面大小改变
    async JjUnitGasListTablePageSizeChange(pageSize) {
      this.JjUnitGasListArgs.num = pageSize
      this.JjUnitGasListArgs.offset = 0
      await this.searchJjUnitGasList()
    },
    // 监管部门的气瓶列表表格页码改变
    async JjUnitGasListTablePageChange(page) {
      this.JjUnitGasListArgs.offset = (page - 1) * this.JjUnitGasListArgs.num
      this.JjUnitGasListCurrentPage = page
      await this.searchJjUnitGasList()
    },
    // 获取某个监管部门的辖内检验单位列表
    async searchJjUnitCheckUnitList() {
      this.JjUnitCheckUnitListLoading = true
      this.JjUnitCheckUnitListArgs.Area = this.Area
      const res = await searchJjUnitCheckUnitList(this.JjUnitCheckUnitListArgs)
      const { list, total } = res.data
      this.JjUnitCheckUnitListTableData = list
      this.JjUnitCheckUnitListTotal = +total
      this.JjUnitCheckUnitListLoading = false
    },
    // 监管部门的检验单位列表表格页面大小改变
    async JjUnitCheckUnitListTablePageSizeChange(pageSize) {
      this.JjUnitCheckUnitListArgs.num = pageSize
      this.JjUnitCheckUnitListArgs.offset = 0
      await this.searchJjUnitCheckUnitList()
    },
    // 监管部门的检验单位列表表格页码改变
    async JjUnitCheckUnitListTablePageChange(page) {
      this.JjUnitCheckUnitListArgs.offset = (page - 1) * this.JjUnitCheckUnitListArgs.num
      this.JjUnitCheckUnitListCurrentPage = page
      await this.searchJjUnitCheckUnitList()
    },
    // 绘制气瓶制造时间图表
    async setMakeYearsChart(MakeYearsInfo) {
      const makeYearsChartOption = {
        chart: {
          type: 'column',
        },
        title: {
          text: '制造时间',
        },
        subtitle: {},
        xAxis: {
          type: 'category',
          labels: {
            rotation: 0, // 设置轴标签旋转角度
          },
          title: {
            text: '年份',
          },
        },
        yAxis: {
          min: 0,
          title: {
            text: '气瓶数',
          },
        },
        legend: {
          enabled: false,
        },
        series: [
          {
            name: '气瓶数',
            data: [...MakeYearsInfo],
          },
        ],
      }
      setTimeout(() => {
        this.gasMakeInfoChart = new Highcharts.chart('gas-make', makeYearsChartOption)
      }, 0)
    },
    // 绘制充装次数图表
    async setRecordChart(recordData) {
      const recordChartOption = {
        chart: {
          type: 'column',
        },
        title: {
          text: '充装次数',
        },
        subtitle: {},
        xAxis: {
          type: 'category',
          labels: {
            rotation: 0, // 设置轴标签旋转角度
          },
          title: {
            text: '充装次数',
          },
        },
        yAxis: {
          min: 0,
          title: {
            text: '气瓶数',
          },
        },
        legend: {
          enabled: false,
        },
        series: [
          {
            name: '气瓶数',
            data: [...recordData],
          },
        ],
      }
      setTimeout(() => {
        this.gasRecordInfoChart = new Highcharts.chart('gas-record', recordChartOption)
      }, 0)
    },
  },
}
</script>

<style lang="less" scoped>
div.table {
  width: 135%;
  margin-left: 60px;
  margin-top: 30px;
  display: flex;
  flex-direction: row;
  // justify-content: center;
  div.container {
    width: 80%;
  }
}
div.page {
  width: 100%;
  display: flex;
  margin-top: 30px;
  flex-direction: row;
  justify-content: flex-end;
  position: relative;
  right: 300px;
}
div.detail-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  div.text-cards {
    width: 100%;
    display: flex;
    flex-direction: row;
    div.text-card {
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      span {
        width: 98%;
        height: 40px;
        font-size: 17px;
        line-height: 40px;
        display: block;
        margin: 5px;
        text-align: center;
        font-weight: 700;
      }
      span.yello {
        color: black;
        background-color: #ffd966;
      }
      span.red {
        color: white;
        background-color: #ff0400;
      }
      span.grey {
        color: black;
        background-color: #d9d9d9;
      }
    }
    div.text-card.active {
      span {
        color: white;
        background-color: #ff0400;
      }
    }
    div.text-card:hover {
      span {
        color: white;
        background-color: #ff0400;
      }
    }
  }
  div.charts {
    display: flex;
    flex-direction: row;
    margin-top: 20px;
    justify-content: space-around;
  }
  div.table {
    div.container {
      margin-left: -50px;
      width: 100%;
    }
  }
}
</style>